在 React 中使用 element-ui
根据官方文档在 React 中使用 element-uiStep 1：npm 安装npm i element-react --saveStep 2：下载主题包npm install element-theme-default --saveStep 3：在 React 中使用打开需要使用到 element-ui 的 jsx 文件，在头部添加import React from \'react\';import ReactDOM from \'react-dom\';import { Button } from ...
2024-01-10
Vue Element校验validate的实例
官方文档限制输入指定类型添加type限制即可，type包括以下值：例子：rules: { bannerType: [ { required: true, message: '请选择类型', trigger: 'change'} ], associateId: [ { required: true, message: '请选择公告', trigger: 'change'} ], associateData: [ { required: true, type: 'url', message: '输入合法的...
2024-01-10
vue element项目引入icon图标的方法
为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库.因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/下面具体介绍如何使用 ...
2024-01-10
【element-ui】element-ui升级
我把公司项目element ui从2.0.8升级到了2.12.0但是el-table中expand一点就卡死浏览器，也没有一点的提示。有人遇到过这问题没？回答：我看官网的2.12.0是没问题的，是不是因为你自己的逻辑出了问题，要不先把官网的demo粘下来看看能不能运行？回答：vue版本升级一下到2.6试试看回答：我已经升级到了最...
2024-01-10
el-input如何设置默认值，用element做的
用v-model绑定数据显示不出来el-input放在form里面求解回答：看代码没有问题。是不是哪个地方重置了form回答：1、首先语法没有问题，检查下拼写有没有错误2、要是弹窗输入的话，看看有没有别人写的或者全局的表单重置方法，例如reset()方法3、最后可以试试添加一个create()生命周期钩子，在里面写一个获取理由审核理由方法在里面对form.check_content进行赋值，然...
2024-02-19
Vue+Element 实现excel的导入导出
Vue+Element 实现excel的导入导出在最近项目中，用到了模板下载与批量上传的功能，下面是实现步骤（本地环境是@vue/cli 4.3.1+element，vue2.0可能会有报错，自行调整即可）一、环境安装1、先安装相关依赖1 npm install -S xlsx file-saver2 npm install -D script-loader2、依赖装完之后，还需要准备两个js文件，分别是Blo...
2024-01-10
vue element ui table树形结构高亮问题
这样一个树形表格，想在插入完数据之后高亮插入的那一行，如果添加的是子级，并且父级没有展开的话，展开父级，高亮当前插入行，感谢各位数据结构： 每一条的areaLists是子级[ { "id": "64d9312c-915d-43cc-b978-b292c543bb67", "areaNumber": "0001", "areaName": "济...
2024-02-23
Vue-cli 4 配置 element-ui 按需加载
在按照element-ui文档和网上各个文章的描述方式都未能正确配置出按需加载的功能。经小编一番摸索之后，终于搞定了，本篇文章记录实现的全过程#1 node与vue的版本情况#2 未按需加载打包后的文件情况由上图看出，只是引入了 element-ui 框架后，js文件急剧的上升到了 783KB，这显然是不能接受的。e...
2024-01-10element-ui中的select下拉列表设置默认值方法
element-ui中的select下拉列表如何设置默认值？在element-ui的运用中，涉及到了select下拉列表。项目中需要将select的默认值给展示出来那如何修改呢？上element-ui中的代码片段<template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.val...
2024-01-10
【JS】Element DatePicker设置动态日期范围
首页专栏javascript文章详情0Element DatePicker设置动态日期范围John Wang发布于 今天 04:21 Element DatePicker 设置动态日期范围业务需求：查询数据量过大需要对日期范围进行限制，数据量随时间的增长不断变化，日期范围也需要相应改变，所以将范围改为动态，后端返回最大限制时间或前端使用配置...
2024-01-10
【element-ui】elementUI，穿梭框，调节宽度
由于显示的了内容太长，穿梭框中的内容显示不全，不知道能不能把宽度调宽一点，或者当鼠标放到某行的时候，此行内容显示完全。 1、是否可以将宽度条调宽2、是否可以变成下图这个样子（当鼠标放上去的时候，剩余内容显示完全）感谢！回答：1、可以将宽度调宽。ElementUI的样式是可以被覆盖...
2024-01-10
【element-ui】element-ui的表单验证的问题
现在只要按登陆，两个表单都会去验证，怎样才能做到只有第一个表单通过检查后，再去验证第二个表单？回答：自定义校验规则。https://element.eleme.cn/#/zh... 用 validateField 进行部分校验。通过，再校验密码。回答：this.$refs['formFirst'].validate((validFirst) => { if (validFirst){ this.$refs['formSecond'].validate...
2024-01-10element ui table（表格）实现点击一行展开功能
前言element ui是一个非常不错的vue的UI框架，element对table进行了封装，简化了vue对表格的渲染。element ui表格中有一个功能是展开行，在2.0版本官网例子中，只可以点击右箭头可以展开，我们的很多需求是点击某一行展开那是不是无法实现呢？其实，借助element ui的一些属性，轻松实现点击某行展开，...
2024-01-10
【element-ui】element NavMenu导航菜单的使用
我自己使用element NavMenu导航菜单时，点击子菜单时会闪烁，并且再重新打开子菜单，但是我看vue-element-admin这个项目的使用，当重新导航到另一个子路由时，是不会出现闪烁和重新打开子菜单，这是如何实现的回答：自己找到答案了，是因为给app中的路由出口router-view设置了一个独一无二的key导致的...
2024-01-10
【element-ui】elementUI 表格无数据时 鼠标悬停报错
elementUI 表格无数据时 鼠标悬停报错Uncaught DOMException Failed to execute setEnd on Range There is no child at offset 1.回答：这是因为你的数据源中不存在表格中定义的字段，把element升级到2.3.9及以上就可以了...
2024-01-10
element 的el-menu组件左右纸叠时候没有动画
使用的是el-menu的左右纸叠组件,去掉了el-menu的自带的动画给el-aside添加的动画,但是收起的时候el-menu瞬间就回去了展开时才会同步el-aside的动画下面是我的代码回答：/deep/ .el-aside { // overflow: unset; transition: width 0.8s; -moz-transition: width...
2024-02-28详解使用element-ui table组件的筛选功能的一个小坑
使用element-ui table组件的筛选功能的一个小坑使用自定义模板和筛选功能，一开始的代码 <el-table-column v-if="key==='isShow'" label="是否在发现页展示" :filters="[{text:'已展示',value: true},{text: '未展示', value: false}]" :filter-method="filterShow"> <template slot-scope="scope"> <el-tag ...
2024-01-10
【Vue】element 怎么去控制每一行的 switch 状态
怎么根据后端返回值 去控制每一行的状态？ 主要是怎么控制每一行？ 直接写scope.row.on 报错scope，拿不到 this.$get('/api/shop', this.getDate).then(res => {console.log(this.scope); //undefinedconsole.log(scope); //scope is not defined}<el-table-column width="200%" label="状态" class="switch...
2024-01-10
【element-ui】el-tree节点点击时阻止其选中
element-ui里面的el-tree组件，节点一点击它就选中了，怎么能在节点点击时满足一定条件才让此节点选中?节点一点击就加上了is-current这个类,根据这个类设置的选中样式,现在不能它一点击就选中该怎么做呢?求大神解答回答：项目一直用的2.9.1版本，里面也有setCurrentKey(null)方法，不过setCurrentKey(null)并不...
2024-01-10
【element-ui】el-table 这种多级表头该如何实现？
姓名 和 电话 是表头。求指教回答：你可以查看element-ui的文档，table表格是有这种支持的，只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="150"></el-table-column> <el-table-column lab...
2024-01-10
VUE element-ui 组件 el-tree 默认选中渲染问题
用element-ui <el-tree> 做一个多级选择, 进行修改的时候默认选中状态,第一次能正确加载.当换行修改其他行时,弹出对话框,第二次不能加载,求大神指点?其中 defaultDate: 是页面加载的时候通过created函数渲染的HTML<el-form-item prop="typeList" label="问题类型"> <el-tree show-checkbox default-expand-all re...
2024-01-10
如何修改Element所有input的属性值
想在select下拉框里面的input元素上加required这个属性，直接写在el-select上没有生效如果说只是一个el-input元素上加这个属性是生效的，求大佬们指教。回答：要给表单加 rules ，在那里面写啊看下官方的例子 表单验证如果是想加属性的话，可以试试这样：document.querySelector('.el-input__inner').required = true如...
2024-03-01
【element-ui】elementUI为什么总是多一个选择文件？
多了一个选择文件的按钮 用的官网的代码却跟官网的样式不一样 查看控制台显示有一行这个代码我设置了.el-upload__input{display: none;}却还是显示 这个怎么回事？用的就是这个第一个例子http://element-cn.eleme.io/#/...<input type="file" name="file" multiple="multiple" class="el-upload__input">回答：你用了别人的组件，为啥还...
2024-01-10
vue-cli搭建的项目引用elementui 的 table 时不显示的问题
使用vue-cli搭建的项目，安装了 elementui ，如下图：也已经在main.js中引入了，如下图：自己新建一个 table.vue 的组件，代码都是按照官网拷贝下来的，如下图：也配置了路由，如下图：app.vue的主文件中代码如下图：页面中的效果，如下图：问题：为什么 elementui 中的table没有加载出来呢？table.vue中的按钮...
2024-01-10
vue cli element ui scss变量如何应用至 子组件中
我按照官方文档里的指引操作，在全局的样式中增加：/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~element-ui/packages/theme-chalk/src/index";并在main.j...
2024-02-24
